import yayJpg from '@/assets/yay.jpg';
import { Link, Outlet, history, useNavigate } from 'umi';
import { useDispatch, useSelector } from "umi"
import { Istate } from '@/models/users';
interface IstateAll {
    users: Istate
}
const Home = () => {
    let navigate = useNavigate()
    const dispatch = useDispatch()
    const productList = useSelector((state: IstateAll) => {
        // console.log(state)
        return state.users.productList
    })
    const userInfo = useSelector((state: IstateAll) => {
        return state.users.userInfo
    })
    // 触发effects里的getProductList方法
    const getProductList = () => {
        dispatch({
            type: 'users/getProductList',
            // payload:{} //无需传参
        })
    }
    // 触发effects里的login方法
    const login = () => {
        dispatch({
            type: 'users/login',
            payload: {
                username: 'lbw',
                password: '555'
            }
        })
    }

    let handleClick1 = () => {
        // api方式路由跳转
        history.push("/message/123")
    }
    let handleClick2 = () => {
        // hooks方式
        navigate("/message/123")
    }
    return (
        <div>
            <h1>首页</h1>
            <p>
                <img src={yayJpg} width="300" />
                {/* <img src={require('/src/assets/yay.jpg')} width="388" /> */}
                {/* 在umi中不能通过相对路径和绝对路径来访问静态资源,需要import 或者 require导入 */}
                {/* <img src="@/assets/yay.jpg" width="388" /> */}
            </p>
            <button onClick={getProductList}>点击触发dva获取数据</button>
            <div>
                <ul>
                    {productList.length > 0 ? productList.map((item: any) => {
                        return <li key={item.id}>产品名称: {item.title}</li>
                    }) : <h3>暂无数据</h3>}
                </ul>
            </div>
            <button onClick={login}>点击触发dva登陆</button>
            <h3>{userInfo.nickname ? userInfo.nickname : '暂无昵称'}</h3>
            <br />
            <button onClick={handleClick1}>点击跳转到消息页api</button>
            <br />
            <button onClick={handleClick2}>点击跳转到消息页hooks</button>
            <br />
            <Link to="/login">去登录</Link>
            <br />
            <Link to="/home/child?name=李雷">点击到子路由</Link>
            <Outlet />
        </div>
    );
}
export default Home
